@import 'base';

//登录页面================
//登录注册找回密码公共表单样式
@-webkit-keyframes shake {
	0%,100% {
		-webkit-transform:translate3d(0, 0, 0);
		transform:translate3d(0, 0, 0)
	}
	10%,30%,50%,70%,90% {
		-webkit-transform:translate3d(-10px, 0, 0);
		transform:translate3d(-10px, 0, 0)
	}
	20%,40%,60%,80% {
		-webkit-transform:translate3d(10px, 0, 0);
		transform:translate3d(10px, 0, 0)
	}
}
@keyframes shake {
	0%,100% {
		-webkit-transform:translate3d(0, 0, 0);
		transform:translate3d(0, 0, 0)
	}
	10%,30%,50%,70%,90% {
		-webkit-transform:translate3d(-10px, 0, 0);
		transform:translate3d(-10px, 0, 0)
	}
	20%,40%,60%,80% {
		-webkit-transform:translate3d(10px, 0, 0);
		transform:translate3d(10px, 0, 0)
	}
}
.translate(@x:-10px,@y:-10px){ -moz-transform: translate(@x,@y); -webkiwt-transform: translate(@x,@y); -o-transform: translate(@x,@y); transform: translate(@x,@y);}

.shake{
	-webkit-animation-name: shake;
	animation-name: shake;
}
body{
	background:#fff;
}

// ======================登录
.login,.reg,.reset-pwd{
	// position:absolute;top:0;left:0;width:100%;
	.logo{
		margin-top:1.5rem;text-align: center;
		img{width:1.2rem;}
	}

	h1{
		font-size: .28rem;
		color: #000;
		font-weight: normal;
		text-align: center;
		margin-top:.15rem;
	}

	.bd{
		margin:1rem auto 0;
		padding:0 .6rem;

		li.form-li{
			border-bottom:1px solid #d3d3d3;
		}

		.inp{
			width: 100%;
			padding: .16rem 0;
			line-height: normal;
			display: block;
			font-size: .3rem;
			border:none;
		}

		.pwd-box{margin-top:0.56rem;}

		
		.update-btn,.login-btn,.reg-btn{
			margin:0.7rem auto;
			color:#fff;
			width:100%;
			height:0.82rem;
			line-height:0.82rem;
			font-size:0.3rem;
			background:#2868a2;
			border:none;
			.bdr(5px);
		}
		.error-tip{
			color:red;
			font-size:0.28rem;
			margin-top:0.3rem;
			display:none;
		}
	}
	
	.animated{
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-iteration-count:1;
		animation-iteration-count:1;
	}
}

.reg{

	.logo{
		#headimgurl{
			width:1.2rem;
			height:1.2rem;
			border-radius: 50%;
			overflow:hidden;
			display:none;
		}
	}

	h3{
		margin-top:.3rem;
		text-align: center;
		font-size:.4rem;
	}
	.mobile-li{
		margin-top:.8rem;
	}
}

//商品列表=====
.list-body{
	background:#f5f5f5;
}
.list-page{
	.search-box{
		position:fixed;
		top:0;
		left:0;
		z-index:3;
		width:100%;
		background:#fff;
		box-shadow: 0 0 10px rgba(0,0,0,0.1);

		.inner-wrap{
			position:relative;
			margin:.15rem .15rem;
			height:.6rem;
			display: flex;
		}

		.search-inp{
			//position:absolute;
			//top:0;
			//left:0;
			height:.5rem;
			line-height:.25rem;
			font-size:.22rem;
			flex:1;
			border:1px solid #ddd;
			border-radius:2px;
			.box-sizing;
			padding:0 .7rem 0 .25rem;
			margin-left:.2rem;
		}

		.icon-sousuo{
			position:absolute;
			top:.04rem;
			right:0rem;
			font-size:.4rem;
			padding:0 .25rem;
			color:#999;
		}

		.choose-month{
			position:relative;
			font-size:.14rem;
			height:.5rem;
			width:1.8rem;
			line-height:.48rem;
			box-sizing: border-box;
			border:1px solid #ddd;
			padding-left:.05rem;
			padding-right:.3rem;
			text-align: center;

			.icon-qingchu{
				position:absolute;
				top:0;
				right:.05rem;
				font-size:.12rem;
				color:#999;
				display:none;
			}
		}
	}

	.list-box{
		padding:1.1rem 0 1rem;

		.add-more-txt{
			font-size:.2rem;
			text-align: center;
			margin:0 auto;
			color:#999;
		}
	}

	.list-ul{
		li{
			position:relative;
			padding:.25rem .4rem 0;
			background:#fff;
			margin-bottom:.18rem;
			overflow:hidden;
			box-shadow: 0 0 6px rgba(0,0,0,0.1);

			/*.icon-status{
				position:absolute;
				top:.1rem;
				left:1.6rem;
				font-size:1.4rem;
				color:rgba(153,153,153,0.4);
				&.icon-status-ok{
					color:rgba(40,104,162,0.4)
				}
			}*/

			.detail{
				position:relative;
				z-index:2;
				overflow:hidden;
				
	
				.item{
					overflow:hidden;
					margin-bottom:.15rem;
					.diy-box;
				}
	
				.label{
					font-size:.2rem;
					color:#999;
					// float:left;
				}
		
				.v{
					font-size:.22rem;
					padding-left:.2rem;
					.flex-1;
					text-align: right;
					// float:right;
				}
			
			}

			.btn-box{
				position:relative;
				z-index:2;
				margin-top:.05rem;
				border-top:1px solid #ddd;

				.btn{
					position:relative;
					width:33.333%;
					float:left;
					padding:.2rem 0 .1rem 0;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					.btn-span{
						display:inline-block;
						padding:0 .2rem;
						height:.6rem;
						line-height:.6rem;
						overflow:hidden;
						border-radius: 25px;
						border:1px solid #ddd;
					}

					&.check-address{
						.btn-span{
							color:#fff;
							background:#2868a2;
							border:1px solid #2868a2;
						}
					}

					.txt{
						font-size:.22rem;
						float:left;
					}

					.iconfont{
						position:relative;
						top:.02rem;
						font-size:.32rem;
						margin-right:.05rem;
						vertical-align: middle;
						float:left;

						&.icon-queren{
							font-size:.32rem;
						}
					}

				//,&.update-address
					/*&.check-address{
						background:red;
						color:#fff;
					}*/

					/*&.check-address,&.update-address{
						&.disabled{
							//background:#f2f2f2;
							visibility: hidden;
						}
					}*/

					/*&.check-address:after{
						position:absolute;
						content:'';
						top:.18rem;
						right:0;
						border-right:1px solid #ddd;
						height:.3rem;
					}

					&.check-address:before{
						position:absolute;
						content:'';
						top:.18rem;
						left:0;
						border-left:1px solid #ddd;
						height:.3rem;
					}*/

					&.disabled{

						.btn-span{
							color:#999;
							background:#f2f2f2;
							border:1px solid #f2f2f2;
						}
					}
				}
			}
			
		}

	
	}


	// 修改地址弹窗
	.up-address-pop,.query-kd-pop{
		position: fixed;
		top: 50%;
		left: 50%;
		z-index:12;
		-webkit-transform: translate3d(-50%,-50%,0);
		transform: translate3d(-50%,-50%,0);
		background-color: #fff;
		width: 90%;
		border-radius: 3px;
		font-size: 16px;
		-webkit-user-select: none;
		overflow: hidden;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transition: .2s;
		transition: .2s;

		.hd{
			padding:.3rem .15rem 0;
			text-align: center;
			font-size:.3rem;
		}

		.bd{
			margin-top:.3rem;
			padding:.3rem;

			.label{
				color:#999;
				font-size:.2rem;
			}

			br{
				margin-top:.1rem;
			}
			
			li{
				margin-bottom:.2rem;
			}
			.inp{
				width:100%;
				height:.6rem;
				line-height:.3rem;
				.box-sizing;
				border:1px solid #ddd;
				border-radius:5px;
				margin-top:0.05rem;
				font-size:.22rem;
				padding:0 .15rem;
			}
		}

		.ft{
			margin-top:.3rem;
			border-top:1px solid #ddd;

			.btn{
				position:relative;
				width:50%;
				float:left;
				font-size:.24rem;
				height:.6rem 0;
				line-height:.6rem;
				padding:.1rem 0;
				text-align: center;

				&:last-child{
					color:#26a2ff;
					&:before{
						position: absolute;
						top:0;
						left:0;
						content:"";
						height:100%;
						width:0;
						border-left:1px solid #ddd;
					}
				}
			}
		}
	}

}

.query-kd-pop{
	max-height:80%;
	overflow:hidden;

	.bd{
		max-height:6.4rem;
		overflow-y:auto;
		overflow-x:hidden;
		font-size:.25rem;
		line-height:.35rem;
	}

	.btn{
		width:100% !important;
	}
}


// 我的
.my-page{
	.list-link{
		li{
			position:relative;
			height:0.82rem;
			background:#fff;
			font-size:.3rem;
			line-height:0.82rem;
			margin-top:.2rem;
			padding:0 .2rem;
			font-style: normal;

			a{
				display:block;
				width:100%;
				height:100%;
				color: rgba(0,0,0,.87);
				.box-sizing;
			}

			.iconfont{
				margin:0 .3rem 0 .1rem;
				font-size:.32rem;
			}

			&:after{
				content: "";
				position: absolute;
				right: .32rem;
				top: 50%;
				width: .2rem;
				height: .2rem;
				border-left: 1px solid currentColor;
				border-top: 1px solid currentColor;
				transform: translate3d(0,-50%,0) rotate(135deg);
				-webkit-transform: translate3d(0,-50%,0) rotate(135deg);
			}
		}
	}
}

// 底部公共菜单
.bottom-nav{
	position:fixed;
	bottom:0;left:0;
	z-index:10;
	width:100%;height:.82rem;
	background:#fff;border-top:1px solid #e7e7e7;
	li{
		position:relative;
		width:50%;
		.text-c;
		.fl;
		font-size:.24rem;


		a{
			display:block;
			width:100%;
			height:100%;
			color:#999;


			.pic{
				margin-top:.05rem;
				display:block;
				width:100%;
				height:.4rem;
				text-align: center;
			}

			.iconfont{
				display:inline-block;
				width:.4rem;
				height:.4rem;
				font-size:.36rem;

				&.icon-my{
					font-size:.38rem;
				}
			}

		}

		&:last-child{
			&:before{
				position:absolute;
				top:0;
				left:0;
				content:"";
				height:100%;
				border-left:1px solid #ddd;
			}
		}

		&.on{
			a{
				color:#2868a2;
			}
			.iconfont{
				color:#2868a2;
			}
		}
	}
}

#mask{
	position:fixed;z-index:11;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);
}

.modal{
	position:fixed;z-index:11;top:50%;left:50%;.translate(-50%,-50%);width:100%;
	.cont-box{margin:0 0.2rem;background:#fff;.bdr(5px);}
	.bd{
		padding:0.8rem 0.15rem;.text-c;font-size:0.32rem;
	}
	.ft{
		.text-c;overflow:hidden;border-top:1px solid #cacaca;.diy-box;
		a{
			.flex-1;display:block;color:#333;width:50%;height:0.8rem;line-height:0.8rem;font-size:0.25rem;
			&:last-child{border-left:1px solid #cacaca;}
		}
	}
}

// 森海塞尔
.sennheiser{
	.table-box{
		margin-top:.2rem;
	}
	table{
		border:1px solid #ddd;
		th{
			height:24px;
			padding-left:5px;
			background:#8db4e3;
		}
		td{
			padding-left:5px;
			height:24px;
			border:1px solid #ddd;
		}
	}
}

.account-number{
	table{
		margin-top:.3rem;
		border:1px solid #ddd;
		td{
			height:24px;
			padding-left:5px;
			border:1px solid #ddd;
		}
	}

	.note{
		margin-top:.2rem;color:red;
	}
}




